<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>淘宝服饰</title>
	<link rel="stylesheet" href="taobaoCostume.css">
</head>
<body>
	<main>
		<div id="left">
			<ul>
				<li><input type="button" value="女靴"></input></li>
				<li><input type="button" value="雪地靴"></input></li>
				<li><input type="button" value="冬裙"></input></li>
				<li><input type="button" value="呢大衣"></input></li>
				<li><input type="button" value="毛衣"></input></li>
				<li><input type="button" value="棉服"></input></li>
				<li><input type="button" value="女裤"></input></li>
				<li><input type="button" value="羽绒服"></input></li>
				<li><input type="button" value="牛仔裤"></input></li>
			</ul>
		</div>
		<div id="middle">
			<img src="女裤.jpg" alt="" id="img">
		</div>
		<div id="right">
			<ul>
				<li><input type="button" value="女包"></input></li>
				<li><input type="button" value="男包"></input></li>
				<li><input type="button" value="登山鞋"></input></li>
				<li><input type="button" value="皮带"></input></li>
				<li><input type="button" value="围巾"></input></li>
				<li><input type="button" value="皮衣"></input></li>
				<li><input type="button" value="男毛衣"></input></li>
				<li><input type="button" value="男棉服"></input></li>
				<li><input type="button" value="男靴"></input></li>
			</ul>			
		</div>
		<dd id="logo">淘</dd>
	</main>
	<script>
		var btns=document.querySelectorAll('input');
		var img=document.querySelector('img');
		for (var i = 0; i < btns.length; i++) {
			btns[i].onclick=function(argument) {
				var content=this.value;
				console.log(content);
				img.setAttribute('src',content+'.jpg');
			}
		}
		console.log(btns);
	</script>
</body>
</html>